// var stringify = require('../../utils/stringify');
Page({
        data: {
                listerListInfo: [],
        },
        onReady: function () {
                this.position = {
                        x: 150,
                        y: 150,
                        vx: 2,
                        vy: 2
                };
                var context = jd.createCanvasContext('canvas')
                context.setTransform(1, 0, 0, 1, 150, 150)

                context.setStrokeStyle("#00ff00")
                context.setLineWidth(5)
                context.rect(0, 0, 200, 200)
                context.stroke()
                context.setStrokeStyle("#ff0000")
                context.setLineWidth(2)
                context.moveTo(160, 100)
                context.arc(100, 100, 60, 0, 2 * Math.PI, true)
                context.moveTo(140, 100)
                context.arc(100, 100, 40, 0, Math.PI, false)
                context.moveTo(85, 80)
                context.arc(80, 80, 5, 0, 2 * Math.PI, true)
                context.moveTo(125, 80)
                context.arc(120, 80, 5, 0, 2 * Math.PI, true)
                context.stroke()

                // 本地
                // let contentPicLocalPath = "/img/scale.png"
                // context.drawImage(contentPicLocalPath, 0, 0, 100, 100)

                // 网络
                let contentPicNetPath = "https://morefun-active-1.oss-cn-shanghai.aliyuncs.com/jd_starbucks/remove.png"
                jd.getImageInfo({
                  //保存网络图片
                  src:contentPicNetPath,
                  success:
                    function (res) {
                      //请求成功后将会生成一个本地路径即res.path,然后将该路径缓存到storageKeyUrl关键字中 
                      // this.globalData.pic = res.path;
                      console.log("jd.getImageInfo --- ok")
                      console.log(res)

                      context.moveTo(0, 0);       //设置起点状态
                      context.lineTo(700, 700);       //设置末端状态
                      context.lineWidth = 5;          //设置线宽状态
                      context.strokeStyle = "#ff00ff";  //设置线的颜色状态
                      context.stroke();               //进行绘制


                      context.drawImage(res.path, 100, 100, 100, 100)
                       context.draw() // 如果不加这句  就画不出remove；如果加上这句，remove会出来，但之前画的内容就没了

                    }
                })


                context.font="20px Georgia";
                context.fillText("我爱我的祖国！",10,50);
                
                context.font="30px Verdana";
                // 创建渐变
                var gradient=context.createLinearGradient(0,0,100,0);
                gradient.addColorStop("0","magenta");
                gradient.addColorStop("0.5","blue");
                gradient.addColorStop("1.0","red");
                // 用渐变填色
                context.fillStyle=gradient;
                context.fillText("我爱我的祖国！",10,90);




                context.draw()

        },
        drawBall: function () {
                var p = this.position;
                p.x += p.vx;
                p.y += p.vy;
                if (p.x >= 300) {
                        p.vx = -2;
                }
                if (p.x <= 7) {
                        p.vx = 2;
                }
                if (p.y >= 300) {
                        p.vy = -2;
                }
                if (p.y <= 7) {
                        p.vy = 2;
                }

                var context = jd.createContext();

                function ball(x, y) {
                        context.beginPath(0);
                        context.arc(x, y, 5, 0, Math.PI * 2);
                        context.setFillStyle('#1aad19');
                        context.setStrokeStyle('rgba(1,1,1,0)');
                        context.fill();
                        context.stroke();
                }

                ball(p.x, 150);
                ball(150, p.y);
                ball(300 - p.x, 150);
                ball(150, 300 - p.y);
                ball(p.x, p.y);
                ball(300 - p.x, 300 - p.y);
                ball(p.x, 300 - p.y);
                ball(300 - p.x, p.y);

                jd.drawCanvas({
                        canvasId: 'canvas',
                        actions: context.getActions()
                });
        },
        onUnload: function () {
                clearInterval(this.interval);
        },
        onTouchStart(e) {
                // this.data.listerListInfo.push(`event : bindtouchstart , res : ${stringify(e)} `);
                // this.setData({
                //         listerListInfo: this.data.listerListInfo
                // });
        },
        onTouchMove(e) {
                // this.data.listerListInfo.push(`event : bindtouchmove , res : ${stringify(e)} `);
                // this.setData({
                //         listerListInfo: this.data.listerListInfo
                // });
        },
        onTouchEnd(e) {
                // this.data.listerListInfo.push(`event : bindtouchend , res : ${stringify(e)} `);
                // this.setData({
                //         listerListInfo: this.data.listerListInfo
                // });
        },
        onTouchCancel(e) {
                // this.data.listerListInfo.push(`event : bindtouchcancel , res : ${stringify(e)} `);
                // this.setData({
                //         listerListInfo: this.data.listerListInfo
                // });
        },

        onGetShot() {
                // 将生成的canvas图片，转为真实图片
                console.log("onGetShot() ----------------------");
                // jd.canvasToTempFilePath({
                //         x: 0,
                //         y: 0,
                //         canvasId: 'canvas',
                //         success: function (resp) {
                //                 console.log(resp)

                //                 jd.saveImageToPhotosAlbum({
                //                         filePath: resp.tempFilePath,
                //                         success(res) {
                //                                 jd.showToast({
                //                                         title: '保存成功',
                //                                         icon: 'success',
                //                                         duration: 1500
                //                                 })
                //                         }
                //                 })
                //         },
                //         fail: function (res) {}
                // })

                //截图并获取base64
                // that.ctx.toDataURL({
                //         x: 0,
                //         y: 0,
                //         width: this.ctx.width,
                //         height: that.ctx.height,
                // }).then(dataURL => {
                //         console.log(dataURL);
                //         ZW_BackImg.visible = true; //隐藏背景图片 

                // });
        }
});